import React from 'react';
import { render } from 'react-dom';
import { Layout, Menu, Breadcrumb, Avatar } from 'antd';

import { IndexItemsComponent } from './index.items';

const { Header, Content, Footer } = Layout;



const element = document.getElementById('root');

var userName = element.attributes["data-user"].value;
var avatarUrl = element.attributes['avatar-url'].value;


class IndexComponent extends React.Component {
    constructor() {
        super();
        this.state = { content: 'myItem' };
    }

    render() {
        return (<Layout className="layout">
            <Header>
                <a href="/">
                    <div className="logo" style={{ lineHeight: "28px", paddingLeft: "10px" }}>
                        Home Page
                    </div>
                </a>
                {/* <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['2']}
                    style={{ lineHeight: '64px', width:"380px",display:"inline-block" }}
                >
                    <Menu.Item key="1">All items</Menu.Item>
                </Menu> */}

                <div style={{float:"right"}}>
                    <a key="2" href="/login" style={{ float: "right", display: !userName ? "inline-block" : "none" }}>Log in</a>
                    <a key="21" href="/logout" style={{ float: "right", display: userName ? "inline-block" : "none" }}>Log out</a>
                    <a key="22" href="/main" style={{ float: "right", marginRight:"10px", display: userName ? "inline-block" : "none" }}>main</a>

                    <span key="111" style={{
                        float: "right",
                        display: "inline-block",
                        color: "wheat",
                        "fontSize": "23px",
                        "paddingRight": "12px",
                        display: userName ? "inline-block" : "none"
                    }}>{userName}</span>

                    <Avatar key="3" src={avatarUrl} style={{ float: "right", margin: "17px 4px", display: userName && avatarUrl ? "inline-block" : "none" }} />
                    <Avatar key="4" icon="user" style={{ float: "right", margin: "17px 4px", display: userName && !avatarUrl ? "inline-block" : "none" }} />
                </div>   
            </Header>
            <Content style={{ padding: '0 50px' }}>
                <IndexItemsComponent isLogin={!!userName}></IndexItemsComponent>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
        )
    };
}


render(<IndexComponent />, element);